@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

body {
  font-family: "Open Sans", sans-serif;
  color: #4b4b4b;
}

#webformName {
  font-weight: 300;
  font-size: 20pt;
  color: #4b4b4b;
  text-transform: uppercase;
}

.progressbarDone, .progress-bar {
  background-color: #38b5cf;
}

hr.header {
  background-color: #4b4b4b;
  height: 2px;
}

hr.mediumLine {
  background-color: #bdbdbd;
  height: 1px;
}

hr.baseLine {
  background-color: transparent;
  height: 1px;
}

.formFieldHeader {
  font-size: 14pt;
  font-weight: 400;
  color: #38b5cf;
}

.smallFontSize {
  font-size: inherit;
}


.primaryButton,
.pipButton {
    background-color: #38b5cf;
    color: #fff;
}

.primaryButton:hover, .primaryButton:focus, .primaryButton:active,
.pipButton:hover, .pipButton:focus, .pipButton:active {
    background-color: #38b5cf;
}

.primaryButton.disabled, .primaryButton[disabled], .primaryButton.disabled:focus, .primaryButton[disabled]:focus,
.pipButton.disabled, .pipButton[disabled], .pipButton.disabled:focus, .pipButton[disabled]:focus {
    background-color: #bdbdbd;
    color: #4b4b4b;
}

/*=========================================================================================================*/
/*================================================== PIP ==================================================*/
/*=========================================================================================================*/

/* Names of cases in the PIP. These don't have any proper identifying classes or elements... */
.fivecol span {
  font-weight: 600;
}

/* Headers. These also don't have any proper identifying classes or elements (h2, anyone?) */
.txtColor.boldText span {
  font-size: 1.2em;
  font-weight: 600;
}

.txtColor {
    color: #38b5cf; /*MenuColor*/
}

a, a.txtColor, .linkColor {
    color: #008acc; /*FontTypeLinkColor*/
}

.lightColor {
    color: #979DA6; /*MenuColorInactive*/
}

#cssmenu li.active a {
    border-bottom: solid 4px #38b5cf; /*MenuColor*/
    color: #38b5cf; /*MenuColor*/
}

#cssmenu li a:hover {
    border-bottom: solid 4px #38b5cf; /*MenuColor*/
}

#cssmenu li a {
    color: #979DA6; /*MenuColorInactive*/
}

#cssmenu ul {
    border-bottom: 4px solid #e1e1e1; /*MenuColorInactive*/
}

.stDone {
    background-color: #4b4b4b; /*ProgressbarCurrent*/
}

.stCurrent {
    background-color: #38b5cf; /*ProgressbarCurrent*/
}

.stPlain {
    background-color: #D8DBDE; /*ProgressbarInactive*/
}

.mediumBorder {
    border: 1px solid #3D434F; /*LineColor*/
}


/*------------------------------- MASTER PAGE -------------------------------*/
#leftHeaderArrow {
    background: url("images/backarrow.png") no-repeat scroll right center rgba(0, 0, 0, 0);
}

#rightHeaderMenu {
    background: url("images/menu.png") no-repeat right;
}

/*------------------------------- VALIDATION, INFORMATION AND ERROR MESSAGES -------------------------------*/
.successAlert {
    color: #3C763d; /*SuccessFontColor*/
    background-color: #DFF0D8; /*SuccessBackgroundColor*/
}

.errorAlert {
    color: #A94442; /*ErrorFontColor*/
    background-color: #F2DEDE; /*ErrorBackgroundColor*/
}

.has-error .form-control {
    border-color: #FF5959; /*ErrorBorderColor*/
}

    .has-error .form-control:focus {
        border-color: #843534; /*ErrorBorderFocusColor*/
    }

.divHasError {
    border: solid 1px #FF5959; /*ErrorBorderColorForDiv*/
}

.popover.error-popover {
    background-color: #FF5959; /*ErrorPopupColor*/
    border-color: #EED3D7;
    color: #FFFFFF; /*ErrorPopupFontColor*/
}

.popover.bottom > .arrow:after {
    border-bottom-color: #FF5959; /*ErrorPopupColor*/
}

.popover.top > .arrow:after {
    border-top-color: #FF5959; /*ErrorPopupColor*/
}

.warningText {
    color: #A94442; /*WarningFontColor*/
}

/*------------------------------- FORM CONTROLS -------------------------------*/
.form-control {
    background-color: #f9f9f9; /*FieldBackgroundColor*/
}

    .form-control:focus {
        border-color: #02a69a; /*FocusFieldColor*/
    }

/*------------------------------- CSS SPINNER -------------------------------*/
#loadingIndicator .spinner {
    border-top: 6px solid #4b4b4b;
    border-bottom: 6px solid #38b5cf;
    border-left: 6px solid #4b4b4b;
    border-right: 6px solid #38b5cf;
}